<template>
  <el-dialog
    class="modify-class"
    width="1200px"
    title="变更概述详情"
    visible
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <!-- popper-class="table-select-poppper" -->
    <el-form class="modify-form mt20" :model="formData">
      <el-form-item v-if="!disabled" label="综控计算机落实情况" class="mt20">
        <div class="btn-list" style="float: right;" >
          <div class="btn-img-text" @click="batchHandle">
            <span class="icon-img batch"></span>
            <span>批量操作</span>
          </div>
        </div>
        <!-- <el-button
          class="btn-common"
          icon="el-icon-copy-document"
          @click="batchHandle"
          style="width: auto;float: right;"
          >批量操作</el-button> -->
      </el-form-item>
      <c-table
        :height="250"
        :table-data="formData.deviceList"
        :table-column="tableColumn1"
        :is-delete="false"
        is-selection
        :operation="!disabled"
        @selection="selectionHandle"
        @on-save="onSave"
        @modify="modifyHandle"
      ></c-table>
      <template v-if="type == deviceKey">
        <el-form-item label="例试品落实情况" class="mt20">
          <el-button
            v-if="!disabled"
            class="btn-common"
            icon="el-icon-plus"
            @click="addSampleHandle"
            style="float:right;"
          ></el-button>
        </el-form-item>
        <c-table
          :height="200"
          :table-data="formData.sampleList"
          :table-column="tableColumn2"
          :operation="!disabled"
          @modify="modifyHandle"
          @on-save="onSave"
          @on-delete="onDelete"
        ></c-table>
      </template>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button v-if="!disabled" class="btn-comfirm" type="primary" @click="saveHandle"
        >确认</el-button
      >
      <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
    </div>
    <issue-tracking-dialog v-if="issueTrackingData.show" :params="issueTrackingData.params" @close="issueTrackingCloseHandle" />
  </el-dialog>
</template>

<script>
import technologyApi from '@/apis/overview/technology.js'
import IssueTrackingDialog from '@/components/IssueTrackingDialog.vue'
import overviewApis from '@/apis/overview/index.js'

export default {
  components: { IssueTrackingDialog },
  props: ['changeData', 'type', 'disabled'],
  data() {
    return {
      loading: false,
      deviceKey: 'DEVICE',
      formData: {
        deviceList: [],
        sampleList: [],
        sampleDeleteList: [],
      },
      selection: [],
      tableColumn1: {
        code: {
          label: '出厂编号',
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        workable: {
          type: 'select',
          label: '是否落实',
          selectOption: [
            { value: '1', label: '是' },
            { value: '0', label: '否' },
          ],
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        person: {
          type: 'input',
          label: '责任人',
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        workableProgress: {
          type: 'issue-tracking',
          label: '落实进度',
          columnProp: {
            align: 'center',
            width: '174px',
            'class-name': 'pd-3-0',
          },
          valueMap: {
            value: 'workableProgressPlan',
            progress: 'workableProgress',
            count: 'workableProgressNum',
          },
        },
        remark: {
          type: 'input',
          label: '备注',
          columnProp: {
            align: 'center',
            width: '174px'
          },
        },
      },
      tableColumn2: {
        code: {
          type: 'input',
          label: '出厂编号',
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        workable: {
          type: 'select',
          label: '是否落实',
          selectOption: [
            { value: '1', label: '是' },
            { value: '0', label: '否' },
          ],
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        person: {
          type: 'input',
          label: '责任人',
          columnProp: {
            align: 'center',
            'width': '140px',
          },
        },
        workableProgress: {
          type: 'issue-tracking',
          label: '落实进度',
          columnProp: {
            align: 'center',
            'width': '174px',
            'class-name': 'pd-3-0',
          },
          valueMap: {
            value: 'workableProgressPlan',
            progress: 'workableProgress',
            count: 'workableProgressNum',
          },
        },
        remark: {
          type: 'input',
          label: '备注',
          columnProp: {
            align: 'center',
            width: '174px'
          },
        },
      },
      issueTrackingData: {
        show: false,
        params: {
          billId: 0,
          type: ''
        }
      }
    }
  },
  methods: {
    close(refresh) {
      this.$emit('close', refresh || this.closeRefresh)
    },
    beforeClose() {
      this.close()
    },
    saveHandle() {
      let formData = {},
        saveMethod
      let deviceList = JSON.parse(JSON.stringify(this.formData.deviceList))
      deviceList.forEach(item => {
        item.workable = item.workable.code
        delete item.type
        delete item.typeDetail
      })
      if (this.type == this.deviceKey) {
        formData.deviceUpdateList = deviceList
        formData.sampleInsertList = []
        formData.sampleUpdateList = []
        formData.sampleDeleteList = JSON.parse(JSON.stringify(this.formData.sampleDeleteList))
        this.formData.sampleList.forEach((item) => {
          item.workable = item.workable.code
          if (item.id) {
            delete item.type
            delete item.typeDetail
            formData.sampleUpdateList.push(item)
          } else {
            formData.sampleInsertList.push(item)
          }
        })
        saveMethod = technologyApi.deviceDetailSave
      } else {
        formData.sysUpdateList = deviceList
        saveMethod = technologyApi.systemDetailSave
      }
      saveMethod(formData).then(() => {
        this.$message.success('保存成功')
        this.close(true)
      })
    },
    cancelHandle() {
      this.close()
    },
    batchHandle() {
      let ids = []
      this.selection.forEach(item => {
        if (item.workable.code == 0 || !item.workableProgress ||  item.workableProgress == 0) {
          ids.push(item.id)
        }
      })
      if (ids.length > 0) {
        technologyApi.batchComp({
          ids: ids.join(',')
        }).then(() => {
          this.$message.success('保存成功')
          this.requestData()
        })
      } else {
        this.$message.warning('没有可设置的数据行')
      }
    },
    onSave(row) {
      row.edit = false
    },
    onDelete(row, index) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.id) {
          this.formData.sampleDeleteList.push(row.id)
        }
        this.formData.sampleList.splice(index, 1)
      })
    },
    addSampleHandle() {
      this.formData.sampleList.push({
        technologyId: this.changeData.id,
        edit: true,
        code: '',
        workable: {
          code: '0',
          message: '否'
        },
        person: '',
        workableProgress: '0',
        workableProgressPlan: null,
        workableProgressNum: 0,
        type: this.type,
        typeDetail: 'SAMPLE',
        remark: '',
      })
    },
    modifyHandle(key, row, isComplete) {
      if (this.disabled) {
        return
      }
      if(row.id) {
        this.cacheModifyData = {
          key,
          row
        }

        this.closeRefresh = true
        let type = 'LSJD'
        if (isComplete) {
          overviewApis.saveProgressRecord({
            billId: row.id,
            type: type,
            complete: 1
          }).then(() => {
            // this.requestData()
            this.issueTrackingRefreshRow()
          })
        } else {
          this.issueTrackingData.show = true
          this.issueTrackingData.params.billId = row.id
          this.issueTrackingData.params.type = type
        }
      } else {
        this.$message.warning('新增节点不能变更计划节点')
      }
    },
    selectionHandle(selection) {
      this.selection = selection
    },
    requestDeviceDetail() {
      this.selection = []
      this.loading = true
      technologyApi
        .deviceDetail({ technologyId: this.changeData.id })
        .then(({data}) => {
          const { deviceList = [], sampleList = [] } = (data || {})
          this.formData.deviceList = deviceList.map((item) => {
            item.workable = {
              code: item.workable ? '1' : '0',
              message: item.workable ? '是' : '否'
            }
            item.edit = false
            return item
          })
          this.formData.sampleList = sampleList.map((item) => {
            item.workable = {
              code: item.workable ? '1' : '0',
              message: item.workable ? '是' : '否'
            }
            item.edit = false
            return item
          })
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },
    requestSysDetail() {
      this.selection = []
      technologyApi
        .systemDetail({ technologyId: this.changeData.id })
        .then(({data}) => {
          this.formData.deviceList = data.map((item) => {
            item.workable = {
              code: item.workable ? '1' : '0',
              message: item.workable ? '是' : '否'
            }
            item.edit = false
            return item
          })
        })
    },
    requestData() {
      if (this.type == this.deviceKey) {
        this.requestDeviceDetail()
      } else {
        this.requestSysDetail()
      }
    },
    issueTrackingCloseHandle(refresh) {
      if (refresh) {
        this.issueTrackingRefreshRow()
      }
      this.issueTrackingData.show = false
    },
    issueTrackingRefreshRow() {
      const {key, row} = this.cacheModifyData
      const valueMap = this.tableColumn1[key].valueMap
      const method = this.type == this.deviceKey ? technologyApi.deviceDetail : technologyApi.systemDetail
      method({id: row.id})
        .then(({ data }) => {
          let newData = {}
          if (this.type == this.deviceKey) {
            const { deviceList, sampleList} = data
            if (deviceList && deviceList.length > 0) {
              newData = deviceList[0]
            }
            if (sampleList && sampleList.length > 0) {
              newData = sampleList[0]
            }
          } else {
            newData = data[0]
          }
          Object.assign(row, {
            [valueMap.value]: newData[valueMap.value],
            [valueMap.progress]: newData[valueMap.progress],
            [valueMap.count]: newData[valueMap.count]
          })
        })
    }
  },
  mounted() {
    this.closeRefresh = false
    this.requestData()
  },
}
</script>

<style></style>
